<template>
  <div>
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px"
      label-position="left">
      <el-form-item label="文章分类:">
        <el-select clearable v-model="formData.cateId" placeholder="请选择">
          <el-option
                  v-for="item in selectOptions"
                  :key="item.ID"
                  :label="item.name"
                  :value="item.ID"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="文章标题" prop="title">
        <el-input v-model="formData.title" placeholder="请输入名称" clearable :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item label="文章内容" prop="content">
        <quill-editor ref="text" v-model="formData.content" class="myQuillEditor" :options="editorOption" />

      </el-form-item>
      <el-form-item size="large">
        <el-button type="primary" @click="submitForm">提交</el-button>
<!--        <el-button @click="resetForm">重置</el-button>-->
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import { quillEditor } from 'vue-quill-editor'
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  import {
    getArticleCategoryList
  } from "@/api/articleCategory";  //  此处请自行替换地址
  import {
    createArticle,
    deleteArticle,
    deleteArticleByIds,
    updateArticle,
    findArticle,
    getArticleList
  } from "@/api/article";  //  此处请自行替换地址
  import {
    createConfig,
    deleteConfig,
    deleteConfigByIds,
    updateConfig,
    findConfig,
    getConfigList
  } from "@/api/config";  //  此处请自行替换地址
export default {
  components: { quillEditor },
  props: [],
  data() {
    return {
      selectOptions:[],
      type:'',
      formData: {
        cateId:undefined,
        title:"",
        content:"",
      },
      editorOption: {
        height: 500
      },
      rules: {
        title: [{
          required: true,
          message: '',
          trigger: 'blur'
        }],
        cateId: [{
          required: true,
          message: '',
          trigger: 'blur'
        }],
      },
    }
  },
  computed: {},
  watch: {},
  methods: {
   async submitForm() {
     let res;
     switch (this.type) {
       case "create":
         res = await createArticle(this.formData);
         break;
       case "update":
         res = await updateArticle(this.formData);
         break;
       default:
         res = await createArticle(this.formData);
         break;
     }
     if (res.code == 0) {
       this.$message({
         type:"success",
         message:"创建/更改成功"
       })
     }
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
  },
  async created() {
    const categoryList = await getArticleCategoryList({page:1,pageSize:1000})
    this.selectOptions = categoryList.data.list
    // 建议通过url传参获取目标数据ID 调用 find方法进行查询数据操作 从而决定本页面是create还是update 以下为id作为url参数示例
    if(this.$route.query.id){
      const res = await findArticle({ ID: this.$route.query.id })
      if(res.code == 0){
        this.formData = res.data.rearticle
        this.type = "update"
      }
    }else{
      this.type = "create"
    }

  }
}

</script>
<style>
  .ql-editor{
    min-height: 400px;
  }
</style>
